<script lang="ts" setup>
import type { CSSProperties } from 'vue'
import { computed, unref } from 'vue'
import { useMenu } from './useLayoutMenu'
import { SimpleMenu } from '@/components/SimpleMenu'
import { AppLogo } from '@/components/Application'

import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
import { ScrollContainer } from '@/components/Container'

import { useGo } from '@/hooks/web/usePage'
import { openWindow } from '@/utils'
import { isHttpUrl } from '@/utils/is'
import { useAppInject } from '@/hooks/web/useAppInject'
import { useDesign } from '@/hooks/web/useDesign'

defineOptions({ name: 'LayoutMenu' })
const go = useGo()
const { getCollapsed } = useMenuSetting()
const { prefixCls } = useDesign('layout-menu')
const { menusRef } = useMenu()
const { getIsMobile } = useAppInject()
const getWrapperStyle: CSSProperties = { height: 'calc(100% - 48px)' }

const getLogoClass = computed(() => {
  return [
    `${prefixCls}-logo`,
    'dark',
    {
      [`${prefixCls}--mobile`]: unref(getIsMobile),
    },
  ]
})

const getCommonProps = computed(() => {
  return {
    beforeClickFn: beforeMenuClickFn,
    items: unref(menusRef),
    theme: 'dark',
    accordion: false,
    collapse: unref(getCollapsed),
    onMenuClick: handleMenuClick,
  }
})

/**
 * click menu
 * @param menu
 */
function handleMenuClick(path: string) {
  go(path)
}

/**
 * before click menu
 * @param menu
 */
async function beforeMenuClickFn(path: string) {
  if (!isHttpUrl(path))
    return true
  openWindow(path)
  return false
}
</script>

<template>
  <AppLogo :show-title="!getCollapsed" :class="getLogoClass" theme="dark" />
  <ScrollContainer :style="getWrapperStyle">
    <SimpleMenu v-if="getCommonProps.items?.length" v-bind="getCommonProps" />
  </ScrollContainer>
</template>

<style lang="less">
@prefix-cls: ~'@{namespace}-layout-menu';
@logo-prefix-cls: ~'@{namespace}-app-logo';

.@{prefix-cls} {
  &-logo {
    height: @header-height;
    padding: 10px 4px 10px 10px;

    img {
      width: @logo-width;
      height: @logo-width;
    }
  }

  &--mobile {
    .@{logo-prefix-cls} {
      &__title {
        opacity: 1;
      }
    }
  }
}
</style>
